<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>css3 超出两行显示。。。</title>
	<style>
		.test {
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:3; 
			width: 370px;
		}
		.remark_top {
			color: #333;
			font-size: 0.75rem;
		}
		.remark_top .u_name {
			float: left;
			box-sizing: border-box;
		}
		.remark_top .u_date {
			float: right;
		}
		.shuxian {
			width: 0;
			height: 10px;
			border: 1px solid red;
		}
		.clearfix:after {
			content: '';
			display: block;
			clear: both;
		}
		.btn {
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div class="test">
		overflow:hidden; //超出的文本隐藏
		text-overflow:ellipsis; //溢出用省略号显示
		white-space:nowrap; //溢出不换行
		这三个是css的基础属性，需要记得。
		但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？
	</div>
	<div class="remark_top clearfix">
		<div class="u_name">用户名</div>
		
		<div class="u_date">2016-06-10</div>
	</div>
	<div class="shuxian"></div>


	<div id="load_html"></div>
	<div class="btn">点击调用jquery load方法</div>
	<script src="./lib/jquery-1.11.3.min.js"></script>
	<script>
		$(function() {
			$('.btn').on('click',function(ev) {
				var obj={name:'test-load'};
				$('#load_html').load('./Jquery-load-method.html',function(ev) {
					console.log(ev);
					console.log(typeof ev);
					$('#qwe123').html('加载之后改变的内容哦');
					$('#load_html .asd123').html('loaded class');
				})
			})
		})
	</script>
</body>
</html>